import React, { useState, useEffect, useRef } from 'react';
import { Comment, List, Tooltip, Input, Button, Row, Col } from 'antd';
import { TreeSelectItem } from './index';
import { DecompositionTreeGraph } from '@ant-design/graphs';

import styles from './index.less';
import { saveComment } from '@/services/okr'
const { TextArea } = Input;

const OtherDept = (props) => {
  const [commentVal, setCommentVal] = useState('');
  const { updatedepartmentId } = props;
  const [config, setConfig] = useState(null)
  const [data, setData] = useState([{
    id: 'A0',
    value: {
      title: '全年降本增收',
      items: [
        {
          text: '3031万',
          value: '80%',
        },
      ],
      percent: 0.8,
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '降本增收项目1',
          percent: 0.7,
          items: [
            {
              text: '1152万',
            },
            {
              text: '占比',
              value: '70%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '降本增收项目1-1',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A111',
                    value: {
                    title: '降本增收项目1-1-1',
                    percent: 0.6,
                    items: [
                        {
                        text: '386w',
                        },
                        {
                        text: '占比',
                        value: '60%',
                        },
                    ],
                    },
                },
                {
                    id: 'A112',
                    value: {
                    title: '降本增收项目1-1-2',
                    percent: 0.4,
                    items: [
                        {
                        text: '188w',
                        },
                        {
                        text: '占比',
                        value: '40%',
                        },
                    ],
                    },
                },
            ]
          },
          {
            id: 'A12',
            value: {
              title: '降本增收项目1-2',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '降本增收项目1-3',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A131',
                    value: {
                      title: '降本增收项目1-3-1',
                      items: [
                        {
                          text: '85万',
                        },
                        {
                          text: '占比',
                          value: '40%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A132',
                    value: {
                      title: '降本增收项目1-3-2',
                      items: [
                        {
                          text: '66万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A133',
                    value: {
                      title: '降本增收项目1-3-3',
                      items: [
                        {
                          text: '46万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                }
            ]
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '降本增收项目2',
          percent: 0.3,
          items: [
            {
              text: '595万',
            },
            {
              text: '占比',
              value: '30%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
      },
    ],
  },
  {
    id: 'A0',
    value: {
      title: '测试数据11',
      items: [
        {
          text: '3031万',
          value: '80%',
        },
      ],
      percent: 0.8,
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '测试数据111',
          percent: 0.7,
          items: [
            {
              text: '1152万',
            },
            {
              text: '占比',
              value: '70%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '测试数据11-1',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A111',
                    value: {
                    title: '测试数据11-1-1',
                    percent: 0.6,
                    items: [
                        {
                        text: '386w',
                        },
                        {
                        text: '占比',
                        value: '60%',
                        },
                    ],
                    },
                },
                {
                    id: 'A112',
                    value: {
                    title: '测试数据11-1-2',
                    percent: 0.4,
                    items: [
                        {
                        text: '188w',
                        },
                        {
                        text: '占比',
                        value: '40%',
                        },
                    ],
                    },
                },
            ]
          },
          {
            id: 'A12',
            value: {
              title: '测试数据11-2',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '测试数据11-3',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A131',
                    value: {
                      title: '测试数据11-3-1',
                      items: [
                        {
                          text: '85万',
                        },
                        {
                          text: '占比',
                          value: '40%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A132',
                    value: {
                      title: '测试数据11-3-2',
                      items: [
                        {
                          text: '66万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A133',
                    value: {
                      title: '测试数据11-3-3',
                      items: [
                        {
                          text: '46万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                }
            ]
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '测试数据11',
          percent: 0.3,
          items: [
            {
              text: '595万',
            },
            {
              text: '占比',
              value: '30%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
      },
    ],
  },
  {
    id: 'A0',
    value: {
      title: '测试OKR-11',
      items: [
        {
          text: '3031万',
          value: '80%',
        },
      ],
      percent: 0.8,
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '测试OKR-11-0',
          percent: 0.7,
          items: [
            {
              text: '1152万',
            },
            {
              text: '占比',
              value: '70%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '测试OKR-11-1',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A111',
                    value: {
                    title: '测试OKR-11-1-1',
                    percent: 0.6,
                    items: [
                        {
                        text: '386w',
                        },
                        {
                        text: '占比',
                        value: '60%',
                        },
                    ],
                    },
                },
                {
                    id: 'A112',
                    value: {
                    title: '测试OKR-11-1-2',
                    percent: 0.4,
                    items: [
                        {
                        text: '188w',
                        },
                        {
                        text: '占比',
                        value: '40%',
                        },
                    ],
                    },
                },
            ]
          },
          {
            id: 'A12',
            value: {
              title: '测试OKR-11-2',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '测试OKR-11-3',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A131',
                    value: {
                      title: '测试OKR-11-3-1',
                      items: [
                        {
                          text: '85万',
                        },
                        {
                          text: '占比',
                          value: '40%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A132',
                    value: {
                      title: '测试OKR-11-3-2',
                      items: [
                        {
                          text: '66万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A133',
                    value: {
                      title: '测试OKR-11-3-3',
                      items: [
                        {
                          text: '46万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                }
            ]
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '测试OKR-12',
          percent: 0.3,
          items: [
            {
              text: '595万',
            },
            {
              text: '占比',
              value: '30%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
      },
    ],
  },
  {
    id: 'A0',
    value: {
      title: '中台构建-11',
      items: [
        {
          text: '3031万',
          value: '80%',
        },
      ],
      percent: 0.8,
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '中台构建-11-0',
          percent: 0.7,
          items: [
            {
              text: '1152万',
            },
            {
              text: '占比',
              value: '70%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '中台构建-11-1',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A111',
                    value: {
                    title: '中台构建-11-1-1',
                    percent: 0.6,
                    items: [
                        {
                        text: '386w',
                        },
                        {
                        text: '占比',
                        value: '60%',
                        },
                    ],
                    },
                },
                {
                    id: 'A112',
                    value: {
                    title: '中台构建-11-1-2',
                    percent: 0.4,
                    items: [
                        {
                        text: '188w',
                        },
                        {
                        text: '占比',
                        value: '40%',
                        },
                    ],
                    },
                },
            ]
          },
          {
            id: 'A12',
            value: {
              title: '中台构建-11-2',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '中台构建-11-3',
              items: [
                {
                  text: '1152万',
                },
                {
                  text: '占比',
                  value: '30%',
                },
              ],
            },
            children: [
                {
                    id: 'A131',
                    value: {
                      title: '中台构建-11-3-1',
                      items: [
                        {
                          text: '85万',
                        },
                        {
                          text: '占比',
                          value: '40%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A132',
                    value: {
                      title: '中台构建-11-3-2',
                      items: [
                        {
                          text: '66万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                },
                {
                    id: 'A133',
                    value: {
                      title: '中台构建-11-3-3',
                      items: [
                        {
                          text: '46万',
                        },
                        {
                          text: '占比',
                          value: '30%',
                        },
                      ],
                    }, 
                }
            ]
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '中台构建-12',
          percent: 0.3,
          items: [
            {
              text: '595万',
            },
            {
              text: '占比',
              value: '30%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
      },
    ],
  },])
  let index = 0;
  useEffect(()=>{
    renderChart(0)
  }, [])
  const updateId = (val) => {
    let cont = index + 1 >= 4 ? 4 : 0;

    console.log(index)
    renderChart(cont)
  }
  const stroke = '#EA2F97';
  const renderChart = (index) => {
    const config1 = {
      data: data[index],
      nodeCfg: {
        size: [140, 25],
        percent: {
          position: 'bottom',
          size: 4,
          style: (arg) => {
            return {
              radius: [0, 0, 0, 2],
              fill: arg.value.percent > 0.3 ? stroke : '#1f8fff',
            };
          },
        },
        items: {
          containerStyle: {
            fill: '#fff',
          },
          padding: 6,
          style: (cfg, group, type) => {
            const styles = {
              icon: {
                width: 12,
                height: 12,
              },
              value: {
                fill: '#f00',
              },
              text: {
                fill: '#aaa',
              },
            };
            return styles[type];
          },
        },
        nodeStateStyles: {
          hover: {
            lineWidth: 2,
          },
        },
        title: {
          containerStyle: {
            fill: 'transparent',
          },
          style: {
            fill: '#000',
            fontSize: 12,
          },
        },
        style: (arg) => {
          return {
            fill: '#fff',
            radius: 2,
            stroke: arg.value.percent > 0.3 ? stroke : '#1f8fff',
          };
        },
      },
      edgeCfg: {
        label: {
          style: {
            fill: '#aaa',
            fontSize: 12,
            fillOpacity: 1,
          },
        },
        style: (edge) => {
          return {
            stroke: '#518AD3',
            strokeOpacity: 0.5,
          };
        },
        endArrow: {
          fill: '#518AD3',
        },
        edgeStateStyles: {
          hover: {
            strokeOpacity: 1,
          },
        },
      },
      markerCfg: (cfg) => {
        return {
          position: 'right',
          show: cfg.children?.length,
          style: (arg) => {
            return {
              stroke: arg.value.percent > 0.3 ? stroke : '#1f8fff',
            };
          },
        };
      },
      behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
    };
    setConfig(config1)
  }
  
  const changeDept = () => {
     const list = [
      
     ]
  }
  return (
      <Row gutter={0} style={{padding: '20px',background: '#eceef0',display: 'flex'}}>
        <div style={{background: '#ffffff', width: '200px',padding: '5px'}}>
          <TreeSelectItem updatedepartmentId={updatedepartmentId} updateId={updateId} />
        </div>
        <div style={{background: '#ffffff',marginLeft: '20px', flex: 1,padding:'5px'}}>
          {config && <DecompositionTreeGraph {...config} />}
        </div>
      </Row>
    
  );
};

export default OtherDept;
